<link rel='ractive' href='./Demo.html'>
<link rel='ractive' href='./BasicTransformation.html'>
<link rel='ractive' href='./MovementIllusion.html'>
<link rel='ractive' href='./Timing.html'>
<link rel='ractive' href='./Ios.html'>
<link rel='ractive' href='./StartButton.html'>

<Demo/>

<h2>Using Ramjet</h2>

<p>Install it with <code>npm install ramjet</code>, or <a href='ramjet.js'>download ramjet.js</a>. <a href='https://github.com/rich-harris/ramjet'>Head over to GitHub</a> for more detailed instructions.</p>

<BasicTransformation/>
<MovementIllusion/>
<Timing/>

<!-- demos -->
<Ios/>

<h2>More info</h2>

<p>Ramjet is free and open source software released under the MIT License. The code is available on <a href='https://github.com/rich-harris/ramjet
'>Github</a>. Issues and pull requests welcome!</p>

<p>It has been successfully tested in IE9+, Chrome (desktop and Android), Firefox, Safari 6+ and mobile Safari - please raise an issue on GitHub if your experience differs!</p>

<p>It was made by this guy -> <a href='http://twitter.com/Rich_Harris'>@Rich_Harris</a>. You should <em>definitely</em> follow him on Twitter.</p>

<style>
	section h1, h2 {
		font-size: 2em;
		margin: 2em 0 1em 0;
	}

	section {
		margin: 0 0 2em 0;
	}

	.a, .b {
		position: relative;
		width: 100px;
		height: 100px;
		border: 1px solid;
	}

	.a span, .b span {
		position: absolute;
		display: block;
		text-align: center;
		width: 100%;
		top: 50%;
		color: white;
		-webkit-transform: translate(0,-50%);
		transform: translate(0,-50%);
		font-size: 2em;
		text-shadow: 0 0 7px rgba(0,0,0,0.1);
	}

	.hidden span {
		text-shadow: none;
	}

	.a {
		float: left;
		background-color: #0074D9;
		border-color: #0074D9;
		background-image: url(noise.png);
	}

	.b {
		float: right;
		background-color: #01FF70;
		border-color: #01FF70;
		background-image: url(noise.png);
	}

	.hidden {
		background: white;
	}

	.demo {
		position: relative;
		margin: 0 0 1em 0;
		padding: 0 0 0 116px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
	}

	/* clearfix */
	.demo:before,
	.demo:after {
		content: " ";
		display: table;
	}

	.demo:after {
		clear: both;
	}

	pre {
		margin: 0 0 1em 0;
		color: #666;
	}

	code {
	}

	select {
		font-family: inherit;
		font-size: inherit;
		margin: 0 1em 0 0;
	}
</style>
